<!--
 * @Descripttion:
 * @Author: liZhaoBo
 * @Date: 2024-02-22 13:38:10
 * @LastEditors: liZhaoBo
 * @LastEditTime: 2024-05-06 09:53:19
-->
<template>
  <a-button type="primary" @click="importView">{{ props.btnTitle }}</a-button>
  <!-- 批量导入对话框 -->
  <a-modal
    v-if="visibleOpen"
    v-model:visible="visible"
    :title="title"
    width="800px"
    title-align="start"
    align-center
    :mask-closable="false"
    class="submit-approval-page"
    @close="closed"
  >
    <div style="width: 100%; margin-bottom: 40px">
      <userBox v-model:user="user" :root-dept-name="rootDeptName"></userBox>
    </div>
    <div class="approval-opinion">
      <div>
        <span>常用意见：</span>
        <a-select
          v-model="form.commonUseOpinion"
          :style="{ width: '250px', 'margin-right': '20px' }"
          placeholder="常用意见"
          @change="commonUseOpinionChange"
        >
          <a-option
            v-for="item of opinionList"
            :key="item.id"
            :value="item.label"
            :label="item.label"
          />
        </a-select>
        <a-button type="primary" @click="saveOpinion">保存到常用意见</a-button>
      </div>
      <div style="margin-top: 20px">
        <a-textarea v-model="form.opinion" placeholder="请输入" />
      </div>
    </div>
    <template #footer>
      <a-button @click="closed">{{ '取消' }}</a-button>
      <a-button type="primary" @click="temporaryStorage()">{{
        '暂存'
      }}</a-button>
      <a-button type="primary" @click="submit()">{{ '提交' }}</a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, defineProps, onMounted, defineEmits } from 'vue';
  import userBox from '@/common/components/userAndDept/userBox.vue';

  const emit = defineEmits(['closeDrawer']);
  const props = defineProps({
    title: {
      type: String,
      default: '流程提交处理窗口',
    },
    btnTitle: {
      type: String,
      default: '提交流程',
    },
    params: {
      type: Object,
      default: () => {
        return {};
      },
      required: false,
    },
  });
  const visible = ref(true);
  const visibleOpen = ref(false);
  interface User {
    userName: string;
    userId: string;
  }
  const user = ref<User>({
    userName: '',
    userId: '',
  });
  // 公司名称，用于组织树选人
  const rootDeptName = ref('');
  const form = ref({
    commonUseOpinion: '',
    opinion: '',
  });
  const opinionList = ref<any[]>([]);
  // 获取常用意见列表
  const getOpinionList = () => {
    opinionList.value = [
      { id: '1111', label: 'test1' },
      { id: '2222', label: 'test2' },
    ];
  };
  onMounted(() => {
    getOpinionList();
  });
  // 保存道常用意见
  const saveOpinion = () => {
    console.log('11111');
  };
  // 常用意见变更
  const commonUseOpinionChange = () => {
    form.value.opinion = form.value.commonUseOpinion;
  };
  // 打开弹窗
  const importView = () => {
    visibleOpen.value = true;
  };

  // 暂存
  const temporaryStorage = () => {
    console.log('222222');
  };

  // 提交
  const submit = () => {
    console.log('222222');
  };

  // 关闭弹窗
  const closed = () => {
    emit('closeDrawer');
    visibleOpen.value = false;
  };
</script>

<style lang="less">
  .submit-approval-page {
    text-align: center;
  }
</style>
